<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 放大镜 -->
    // 1 当鼠标移入.image标签 设置.image>span 与.back 显示
    // 2 当鼠标移出.image标签 设置.image>span 与.back 隐藏
    // 3 当鼠标在.image标签中进行移动时,设置span标签跟着鼠标进行移动; 
    //   不能超出.image范围,设置.back的等比例背景图移动
    // 4 当鼠标移入li标签 设置当前li带有边框,其余li不要
    //   同时更改.image中img与.back的背景图的图都为当前li中img的路径
    <!-- 1.先获取需要用到的标签
         2. 鼠标移入,出现效果 onmouseenter
         3. 鼠标移出 onmouseleave
         4.设置移动效果 onmousemove 
         5. 鼠标到当前div的距离 = 鼠标到浏览器视图窗口的距离 - divimg标签到浏览器视图窗口的距离 - 返回span的像素一般宽度
         6.计算鼠标可移动的最大值offsetWidth
         7.限制鼠标可移动最大值、最小值offsetWidth
         8.设置span的移动 但是移动范围由鼠标的位置确定
         9. 鼠标到当前div的X轴l : maxl == 背景l : 背景图移动的最大值
         10.设置li循环，切换图片--> 


         <!-- 三级联动 -->
         <!-- 1、首先需要获取所有省的数组，通过遍历得到省
         2、获取市的数组、再进行遍历得到市。注：需要根据省份的索引值然后得到所有市的数组
         3、最后获取所有（县、镇）的数组，必须根据所在省、所在市才可以得到县、镇 -->
         <!-- 获取省市县的select
              声明两个全局的索引 用于记录select中显示的是哪个option -->
         // 1.设置下拉选择框的默认值，渲染出河南省郑州中原区
         // 2.获取对象的的选择对应的城市的数组，用监听事件
         // 2.1先清空渲染
         // 2.2获取当前下拉框对象内选中option的索引值
         // 2.3循环这个数组 ,得到数组的的所有对象
         // 2.4在循环中渲染数据并累加
         // 注意省市区数组的索引号，渲染之间的关系

         <!-- pc端滑动轮播图 -->
         <!-- 在轮播图中实现在图片上鼠标移动时，图片能随着鼠标的变化左右移动，
              鼠标向左滑动，图片显示下一张，鼠标向右滑，图片显示上一张。
        1. 声明变量获取到轮播的图片，所需要的标签
        2. 先循环渲染标签得到轮播图片，渲染需要的轮播图样式
        3. 给标签设置初始样式，以图片总宽度为样式总宽度
        4. 声明为0 的变量作为当前显示图片的索引号
        5. 添加鼠标开始事件，得到鼠标开始移动时的到窗口的宽度
        6. 添加鼠标移走事件
        6.1 声明变量为鼠标触碰移走后距离窗口的宽度
        6.2 判断鼠标触碰方向，
        6.2.1鼠标向左滑动则图片向右移动，
        6.2.2鼠标向右滑动则图片向左移动，
        6.3 设置图片移动的动画样式
        6.4 判断图片是否移动到最后一张，true则再次移动时重复最后一张并瞬间移动到第一张-->

</body>
</html>